<template>
  <div class="app-container home">
    <!-- 欢迎信息 -->
    <div class="welcome-container">
      <div class="welcome-left">
        <h1>欢迎回来，{{ name }}</h1>
        <p class="welcome-subtitle">今天是 {{ today }}，祝您工作愉快！</p>
      </div>
      <div class="welcome-right">
        <el-button type="primary" icon="el-icon-plus" @click="handleQuickAction">快速操作</el-button>
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" v-for="(item, index) in statCards" :key="index">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div class="stat-card-content">
            <div class="stat-card-icon" :style="{ backgroundColor: item.bgColor }">
              <i :class="item.icon"></i>
            </div>
            <div class="stat-card-info">
              <div class="stat-card-title">{{ item.title }}</div>
              <div class="stat-card-value">{{ item.value }}</div>
              <div class="stat-card-change" :class="{'up': item.change > 0, 'down': item.change < 0}">
                <i :class="item.change > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{ Math.abs(item.change) }}% 较上周
              </div>
          </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表和活动区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :xs="24" :lg="16">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>销售数据分析</span>
            <el-radio-group v-model="chartTimeRange" size="mini">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">今年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <!-- 模拟图表 -->
            <div class="fake-chart">
              <div class="chart-bars">
                <div v-for="(item, index) in salesData" :key="index" class="chart-bar-item">
                  <div class="chart-bar" :style="{ height: item.value + '%' }"></div>
                  <div class="chart-bar-label">{{ item.label }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="8">
        <el-card shadow="hover" class="activity-card">
          <div slot="header" class="activity-header">
            <span>最近活动</span>
            <el-button type="text" @click="refreshActivities">刷新</el-button>
          </div>
          <div class="activity-list">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.time"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size">
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷功能入口 -->
    <el-card shadow="hover" class="shortcut-card">
      <div slot="header" class="shortcut-header">
        <span>快捷功能</span>
      </div>
      <div class="shortcut-grid">
        <div class="shortcut-item" v-for="(item, index) in shortcuts" :key="index" @click="navigateTo(item.path)">
          <div class="shortcut-icon" :style="{ backgroundColor: item.bgColor }">
            <i :class="item.icon"></i>
          </div>
          <div class="shortcut-title">{{ item.title }}</div>
        </div>
      </div>
    </el-card>

    <!-- 待办任务 -->
    <el-card shadow="hover" class="tasks-card">
      <div slot="header" class="tasks-header">
        <span>我的待办</span>
        <el-button type="text" @click="addNewTask">添加任务</el-button>
      </div>
      <div class="tasks-list">
        <el-table :data="tasks" style="width: 100%" border>
          <el-table-column prop="title" label="任务名称"></el-table-column>
          <el-table-column prop="priority" label="优先级" width="100">
            <template slot-scope="scope">
              <el-tag :type="getPriorityType(scope.row.priority)">{{ scope.row.priority }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="deadline" label="截止日期" width="180"></el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.completed"
                active-text="完成"
                inactive-text="进行中">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "Index",
  data() {
    return {
      today: this.formatDate(new Date()),
      chartTimeRange: 'month',
      statCards: [
        { 
          title: '总销售额', 
          value: '¥126,560', 
          change: 12.5, 
          icon: 'el-icon-s-goods',
          bgColor: '#409EFF'
        },
        { 
          title: '访问量', 
          value: '88,546', 
          change: 5.9, 
          icon: 'el-icon-view',
          bgColor: '#67C23A'
        },
        { 
          title: '订单数', 
          value: '2,356', 
          change: -3.2, 
          icon: 'el-icon-s-order',
          bgColor: '#E6A23C'
        },
        { 
          title: '新增用户', 
          value: '356', 
          change: 8.4, 
          icon: 'el-icon-user',
          bgColor: '#F56C6C'
        }
      ],
      salesData: [
        { label: '周一', value: 45 },
        { label: '周二', value: 60 },
        { label: '周三', value: 35 },
        { label: '周四', value: 75 },
        { label: '周五', value: 50 },
        { label: '周六', value: 40 },
        { label: '周日', value: 30 }
      ],
      activities: [
        { 
          content: '系统更新完成', 
          time: '10分钟前', 
          type: 'success',
          color: '#67C23A',
          size: 'normal'
        },
        { 
          content: '新订单 #2023111502 已处理', 
          time: '1小时前', 
          type: 'primary',
          color: '#409EFF',
          size: 'normal' 
        },
        { 
          content: '王小明完成了任务：库存盘点', 
          time: '2小时前', 
          type: 'info',
          color: '#909399',
          size: 'normal' 
        },
        { 
          content: '系统检测到异常登录', 
          time: '昨天 14:36', 
          type: 'danger',
          color: '#F56C6C',
          size: 'normal' 
        },
        { 
          content: '每周例会提醒', 
          time: '昨天 10:00', 
          type: 'warning',
          color: '#E6A23C',
          size: 'normal' 
        }
      ],
      shortcuts: [
        { title: '用户管理', icon: 'el-icon-user', path: '/system/user', bgColor: 'rgba(64, 158, 255, 0.1)' },
        { title: '订单管理', icon: 'el-icon-s-order', path: '/order', bgColor: 'rgba(103, 194, 58, 0.1)' },
        { title: '商品管理', icon: 'el-icon-shopping-cart-full', path: '/goods', bgColor: 'rgba(230, 162, 60, 0.1)' },
        { title: '数据统计', icon: 'el-icon-data-line', path: '/statistics', bgColor: 'rgba(245, 108, 108, 0.1)' },
        { title: '系统设置', icon: 'el-icon-setting', path: '/system/config', bgColor: 'rgba(144, 147, 153, 0.1)' },
        { title: '权限管理', icon: 'el-icon-lock', path: '/system/role', bgColor: 'rgba(121, 187, 255, 0.1)' }
      ],
      tasks: [
        { title: '部署新版本系统', priority: '高', deadline: '2023-11-20', completed: false },
        { title: '完成月度报表', priority: '中', deadline: '2023-11-15', completed: true },
        { title: '审核新用户申请', priority: '低', deadline: '2023-11-18', completed: false },
        { title: '更新产品库存', priority: '高', deadline: '2023-11-14', completed: false }
      ]
    };
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}年${month}月${day}日`;
    },
    handleQuickAction() {
      this.$message.success('快速操作按钮被点击！');
    },
    refreshActivities() {
      this.$message.success('活动列表已刷新！');
    },
    navigateTo(path) {
      this.$router.push(path);
    },
    getPriorityType(priority) {
      switch(priority) {
        case '高': return 'danger';
        case '中': return 'warning';
        case '低': return 'info';
        default: return 'info';
      }
    },
    addNewTask() {
      this.$message.success('添加新任务');
    },
    handleEdit(row) {
      this.$message.success(`编辑任务：${row.title}`);
    },
    handleDelete(row) {
      this.$message.success(`删除任务：${row.title}`);
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  
  // 欢迎区域
  .welcome-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .welcome-left {
      h1 {
        font-size: 24px;
        color: #303133;
        margin: 0;
        margin-bottom: 8px;
      }
      
      .welcome-subtitle {
        font-size: 14px;
        color: #909399;
        margin: 0;
      }
    }
  }
  
  // 数据统计卡片
  .stat-cards {
    margin-bottom: 20px;
    
    .stat-card-content {
      display: flex;
      align-items: center;
      
      .stat-card-icon {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        
        i {
          font-size: 28px;
          color: #fff;
        }
      }
      
      .stat-card-info {
        flex: 1;
        
        .stat-card-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }
        
        .stat-card-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .stat-card-change {
          font-size: 12px;
          
          &.up {
            color: #67C23A;
          }
          
          &.down {
            color: #F56C6C;
          }
        }
      }
    }
  }
  
  // 图表区域
  .chart-section {
    margin-bottom: 20px;
    
    .chart-card, .activity-card {
      height: 400px;
      
      .chart-header, .activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .chart-container {
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .fake-chart {
          width: 100%;
          height: 280px;
          
          .chart-bars {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            height: 250px;
            padding: 0 20px;
            
            .chart-bar-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 12%;
              
              .chart-bar {
                width: 100%;
                background: linear-gradient(to top, #409EFF, #53a8ff);
                border-radius: 4px 4px 0 0;
                transition: height 0.5s ease;
              }
              
              .chart-bar-label {
                margin-top: 8px;
                font-size: 12px;
                color: #909399;
              }
            }
          }
        }
      }
      
      .activity-list {
        height: 320px;
        overflow-y: auto;
        padding: 0 10px;
      }
    }
  }
  
  // 快捷功能入口
  .shortcut-card {
    margin-bottom: 20px;
    
    .shortcut-header {
      margin-bottom: 15px;
    }
    
    .shortcut-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20px;
      
      @media (max-width: 1400px) {
        grid-template-columns: repeat(4, 1fr);
      }
      
      @media (max-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
      }
      
      @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .shortcut-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        padding: 15px;
        border-radius: 8px;
        transition: all 0.3s;
        
        &:hover {
          background-color: #f2f6fc;
          transform: translateY(-5px);
        }
        
        .shortcut-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 10px;
          
          i {
            font-size: 24px;
            color: #409EFF;
          }
        }
        
        .shortcut-title {
          font-size: 14px;
          color: #303133;
        }
      }
    }
  }
  
  // 任务卡片
  .tasks-card {
    .tasks-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>

